<style scoped>
    .gap {
        margin: 5px;
    }
</style>
<template>
    <div>
        <el-row>
            <el-col :xs="24" :sm="24" :md="12" :lg="12">
                <div class="ivu-mt gap">
                    <el-card :bordered="false">
                        <p class="card-title">
                            {{$t('message.term.days_diff_calculator')}}
                        </p>
                        <el-divider dashed />
                        <el-form ref="form1" :model="form1" label-width="80px">
                            <el-form-item :label="$t('message.term.gmt_start')">
                                <el-date-picker v-model="form1.dayStart" type="date" :placeholder="$t('message.notice.pick_date_start')" style="width: 200px" @on-change="resetDifferenceInDays()"></el-date-picker>
                                <el-tag color="success">含当日</el-tag>
                            </el-form-item>
                            <el-form-item :label="$t('message.term.deadline')">
                                <el-date-picker v-model="form1.dayEnd" type="date" :placeholder="$t('message.notice.pick_deadline')" style="width: 200px" @on-change="resetDifferenceInDays()"></el-date-picker>
                                <el-tag color="success">含当日</el-tag>
                            </el-form-item>
                            <el-form-item :label="$t('message.term.differ')">
                                <el-input v-model="form1.diffDay" style="width: 200px" readonly/>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="calculateDifferenceInDays()">{{$t('message.term.calculate_difference_in_days')}}</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12">
                <div class="ivu-mt gap">
                    <el-card :bordered="false">
                        <p class="card-title">
                            向后推算日期
                        </p>
                        <el-divider dashed />
                        <el-form ref="form2" :model="form2" label-width="80px">
                            <el-form-item label="开始时间">
                                <el-date-picker v-model="form2.dayStart" type="date" :placeholder="$t('message.notice.pick_date_start')" style="width: 200px" @on-change="resetDate()"></el-date-picker>
                                <el-tag color="warning">不含当日</el-tag>
                            </el-form-item>
                            <el-form-item label="往后天数">
                                <el-input v-model="form2.day" type="number" style="width: 200px" @on-change="resetDate()">
                                    <span slot="append">天</span>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="推算日期">
                                <el-input v-model="form2.dayEnd" style="width: 200px" readonly/>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="calculateDate()">推算日期</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import { API } from '@/customized/http/api';
    import Util from '@/customized/util/utils';
    export default {
        components: {

        },
        data() {
            return {
                form1: {
                    dayStart: "",
                    dayEnd: "",
                    diffDay: ""
                },
                form2: {
                    dayStart: "",
                    day: 0,
                    dayEnd: ""
                }
            }
        },
        mounted() {
            this.$nextTick(() => {

            });
        },
        watch: {

        },
        computed: {

        },
        methods: {
            calculateDifferenceInDays() {
                let dayStart = this.form1.dayStart;
                let dayEnd = this.form1.dayEnd;
                if (!dayStart || !dayEnd) {
                    this.$Notice.error({
                        title: '错误',
                        desc: '请选择正确的日期'
                    });
                    return;
                }

                let millisecondsStart = dayStart.getTime();
                let millisecondsEnd = dayEnd.getTime();
                if (millisecondsEnd < millisecondsStart) {
                    this.$Notice.error({
                        title: '错误',
                        desc: '截止时间不能早于开始时间'
                    });
                    return;
                }

                let diffMilliseconds = millisecondsEnd - millisecondsStart;
                let diffDay = diffMilliseconds / (1000 * 60 * 60 * 24);
                this.form1.diffDay = diffDay + 1 + "天"; // 含当日 + 1天
            },
            resetDifferenceInDays() {
                this.form1.diffDay = "";
            },
            calculateDate() {
                let dayStart = this.form2.dayStart;
                let day = this.form2.day;

                if (!dayStart) {
                    this.$Notice.error({
                        title: '错误',
                        desc: '请选择正确的日期'
                    });
                    return;
                }

                if (!day) {
                    this.$Notice.error({
                        title: '错误',
                        desc: '请选择正确天数'
                    });
                    return;
                }

                let millisecondsStart = dayStart.getTime();
                let targetMilliseconds = millisecondsStart + 1000 * 60 * 60 * 24 * day;

                let newTime = new Date(targetMilliseconds);
                this.form2.dayEnd = Util.formatDate(newTime, 'yyyy-MM-dd');
            },
            resetDate(){
                this.form2.dayEnd = "";
            }
        }
    }
</script>